/*
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/

:host {
  @apply(--layout-horizontal);
  overflow: hidden;
}

.main {
  @apply(--layout-flex);
  @apply(--layout-horizontal);
  @apply(--layout-center-center);
  position: relative;
}

.view-select:not([show-all]) {
  @apply(--layout-flex);
  @apply(--layout-horizontal);
  @apply(--layout-center-center);
}

.view-select:not([show-all]) device-view:not(.iron-selected) {
  display: none;
}

.view-select[show-all] {
  display: block;
  width: 800px;
  height: 600px;
}

.view-select[show-all] device-view {
  position: absolute;
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

.view-select:not([show-all]) device-view[device=laptop] {
  @apply(--layout-fit);
  width: auto;
  height: auto;
}

.view-select[show-all] device-view[device=laptop] {
  -webkit-transform: translate3d(0px, 40px, 0) scale(0.5);
  transform: translate3d(0px, 40px, 0) scale(0.5);
}

.view-select[show-all] device-view[device=tablet] {
  -webkit-transform: translate3d(200px, 120px, 0) scale(0.5);
  transform: translate3d(200px, 120px, 0) scale(0.5);
}

.view-select[show-all] device-view[device=phone] {
  -webkit-transform: translate3d(620px, 170px, 0) scale(0.5);
  transform: translate3d(620px, 170px, 0) scale(0.5);
}

@media (max-width: 1024px) {

  .view-select:not([show-all]):not([device=laptop]) {
    width: 1400px;
    height: 800px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    @apply(--layout-flex-none);
  }

  .view-select[show-all] {
    width: 400px;
    height: 300px;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
  }

}

.sidebar {
  position: relative;
  width: 136px;
  background-color: #333;
  padding: 16px;
}

.sidebar h4 {
  margin: 32px 0 16px;
  font-weight: 300;
  color: #fff;
}

.device-select {
  @apply(--layout-horizontal);
  @apply(--layout-center);
  color: #fff;
  margin-top: -8px;
}

.sidebar iron-icon {
  padding: 8px;
  color: #fff;
}

.sidebar iron-icon.landscape:not(.no-landscape) {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.device-select[show-all] iron-icon {
  color: #fff !important;
  opacity: 0.25;
  pointer-events: none;
}

.device-select iron-icon.iron-selected {
  color: #0f9d58;
}

paper-toggle-button {
  --paper-toggle-button-unchecked-bar-color: #999;
}

a > h4 {
  font-style: italic;
  text-decoration: underline;
}

select {
  width: 136px;
  padding: 4px 6px;
  font-size: 14px;
  border: 0;
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  background: #fff;
  color: #555;
}
